<script setup lang="ts">
import Zu55 from "./assets/zu55";
import Module from "./module";

import * as echarts from "echarts/core";
import { GridComponent } from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);

const option = {
	xAxis: {
		type: "category",
		data: ["0:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"],
		axisTick: {
			show: false
		},
		axisLine: {
			show: false
		}
	},
	yAxis: {
		type: "value",
		splitLine: {
			lineStyle: {
				color: "#314165",
				opacity: 0.5
			}
		}
	},
	axisLabel: { show: false },
	grid: {
		left: "10%",
		top: "10%",
		right: "10%",
		bottom: "10%"
	},
	series: [
		{
			data: [20, 32, 21, 34, 40, 30, 20],
			type: "line",
			smooth: true,
			lineStyle: {
				color: "#FFA011",
				width: 3
			},
			itemStyle: {
				opacity: 0
			},
			areaStyle: {
				color: {
					type: "linear",
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{
							offset: 0,
							color: "#FFA011" // 0% 处的颜色
						},
						{
							offset: 1,
							color: "#FFA01100" //1% 处的颜色
						}
					],
					global: false // 缺省为 false
				}
			}
		}
	]
};
const lineCharts = ref();
onMounted(() => {
	setTimeout(() => {
		// const chartDom: any = document.getElementById("line-charts");
		const myChart = echarts.init(lineCharts.value);

		option && myChart.setOption(option);
		window.onresize = () => myChart.resize();
	}, 500);
});
</script>

<template>
	<Module class="h-1/3 w-full box-border p-2" title="告警趋势">
		<div class="flex flex-col w-full h-full">
			<div class="switch-box h-[32px] mx-2">
				<div class="h-full relative w-fit flex flex-row justify-center items-center">
					<div class="absolute w-1/2 h-full left-0 text-center flex justify-center text-[#FFA011]">
						<div class="w-fit h-full flex justify-between flex-col">
							<div class="h-fit mt-1">今日</div>
							<div class="h-[3px] w-full bg-[#FFA011] rounded-t-2xl" />
						</div>
					</div>
					<div class="absolute w-1/2 h-full right-0 text-center flex justify-center">
						<div class="w-fit h-full flex justify-between flex-col">
							<div class="h-fit mt-1">本月</div>
							<!--							<div class="h-[3px] w-full bg-[#FFA011] rounded-t-2xl" />-->
						</div>
					</div>
					<Zu55 class="h-full" />
				</div>
			</div>
			<div class="mx-2 flex-1 flex flex-row">
				<div class="w-full h-full" ref="lineCharts"></div>
			</div>
		</div>
	</Module>
</template>

<style scoped lang="scss"></style>
